<template>
	<view>
		<view style="flex: 1;overflow-y: auto;padding-left: 20px;padding-right: 20px;box-sizing: border-box">
			<view class="info-item" style="padding-bottom: 20px;align-items: flex-end;padding-top: 10px">
				<view class="info-item-title"><span style="color: red;">*</span>头像</view>
				<view class="info-item-value">
					<view
						style="height: 50px;width: 50px;background: silver;border-radius: 100px;overflow: hidden;margin-bottom: -15px;">
						<button open-type="chooseAvatar" class="avatar-wrapper" @chooseavatar="uploadAva">
							<image class="avatar" :src="userInfo.avatarUrl"></image>
						</button>
					</view>

				</view>
				<view class="info-item-right">
					<image src="../../static/right.png" class="info-item-right" />
				</view>
			</view>

			<view class="info-item">
				<view class="info-item-title"><span style="color: red;">*</span>昵称</view>
				<view class="info-item-value">
					<view style="font-size: 15px">
						<view style="flex: 1;display: flex;align-items: center;">
							<input type="nickname" placeholder="建议填写完整姓名" v-model="userInfo.nickName"
								placeholder-style="color:#9f9f9c" />
						</view>

					</view>
				</view>
				<view class="info-item-right">
					<image src="../../static/right.png" class="info-item-right" />
				</view>
			</view>
			<view class="info-item">
				<view class="info-item-title"><span style="color: red;">*</span>手机号</view>
				<view class="info-item-value">
					<view style="font-size: 15px">
						<view style="flex: 1;display: flex;align-items: center;">
							<input type="number" placeholder="请填写手机号" v-model="userInfo.phone"
								placeholder-style="color:#9f9f9c" />
						</view>
					</view>
				</view>
				<view class="info-item-right">
					<image src="../../static/right.png" class="info-item-right" />
				</view>
			</view>
			<view class="info-item">
				<view class="info-item-title"><span style="color: red;">*</span>性别</view>
				<view class="info-item-value">
					<view style="font-size: 15px">
						<view @click="openSex" style="flex: 1;display: flex;align-items: center;">
							<input :disabled="true" placeholder="请选择性别" v-model="sex"
								placeholder-style="color:#9f9f9c" />
						</view>
						<uv-picker ref="pickerSex" :columns="columnsSex" keyName="label"
							@confirm="confirmSex"></uv-picker>
					</view>
				</view>
				<view class="info-item-right">
					<image src="../../static/right.png" class="info-item-right" />
				</view>
			</view>
			<view class="info-item">
				<view class="info-item-title"><span style="color: red;">*</span>出生日期</view>
				<view class="info-item-value">
					<view style="font-size: 15px">
						<view @click="openData" style="flex: 1;display: flex;align-items: center;">
							<input :disabled="true" placeholder="请选择出生日期" v-model="userInfo.birthday"
								placeholder-style="color:#9f9f9c" />
						</view>
						<uv-datetime-picker ref="datetimePicker" v-model="birthday" :minDate="631123200000"
							:maxDate="birthday" :formatter="formatter" mode="date" @confirm="confirm">
						</uv-datetime-picker>
					</view>
				</view>
				<view class="info-item-right">
					<image src="../../static/right.png" class="info-item-right" />
				</view>
			</view>
			<view class="info-item">
				<view class="info-item-title"><span style="color: red;">*</span>邮箱</view>
				<view class="info-item-value">
					<view style="font-size: 15px">
						<view style="flex: 1;display: flex;align-items: center;">
							<input placeholder="请填写邮箱" v-model="userInfo.email" placeholder-style="color:#9f9f9c" />
						</view>
					</view>
				</view>
				<view class="info-item-right">
					<image src="../../static/right.png" class="info-item-right" />
				</view>
			</view>
			<view style="margin-top: 25px;display: flex;align-items: center;justify-content: center">
				<view class="info-save" @click="save">
					注册
				</view>
			</view>
			<view style="margin-top: 100rpx;color:#c8c9cc;font-size: 13px;">
				Tips: 请认真核对并输入正确的信息，以便信息查询。
			</view>
		</view>
	</view>
</template>

<script>
	import {
		code,
		mobile,
		jsonString,
		object,
		email
	} from '@/uni_modules/uv-ui-tools/libs/function/test.js';
	export default {
		data() {
			return {
				userInfo: {
					nickName: '',
					avatarUrl: '',
					phone: '',
					email: '',
					birthday: '',
					status: 1,
					sex: ''
				},
				sex: '',
				birthday: Number(new Date()),
				openId: '',
				isUser: false, // 是否存在账号
				columnsSex: [
					[{
						label: '男',
						// 其他属性值
						id: 1
					}, {
						label: '女',
						id: 2
					}]
				]
			}
		},
		onLoad() {
			uni.login({
				provider: 'weixin',
				success: res => {
					uniCloud.callFunction({
						name: 'user',
						data: {
							action: 'appid',
							js_code: res.code
						},
						success: Res => {
							uni.setStorageSync('openid', Res.result.openid)
						}
					})
				}
			})
		},
		methods: {
			// 选择出生日期
			openData() {
				this.$refs.datetimePicker.open();
			},
			//选择性别
			openSex() {
				this.$refs.pickerSex.open()
			},
			confirmSex(e) {
				console.log(e)
				this.sex = e.value[0].label
				this.userInfo.sex = e.value[0].id
			},
			confirm(e) {
				console.log('confirm', e);
				this.userInfo.birthday = uni.$uv.timeFormat(e.value)
			},
			// 格式化
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			// 上传头像
			async uploadAva(e) {
				console.log(e)
				uni.showLoading({
					title: '上传中'
				})
				uniCloud.uploadFile({
					cloudPath: Date.now() + '.png',
					filePath: e.detail.avatarUrl,
					success: Res => {
						console.log('Res', Res)
						this.userInfo.avatarUrl = Res.fileID
						uni.hideLoading()
					}
				})
			},
			// 注册
			save() {
				if (this.isUser) {
					uni.showToast({
						title: '请勿重复注册！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
					return
				}
				if (this.userInfo.avatarUrl == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
					return
				} else if (this.userInfo.nickName == '') {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none'
					})
					return
				} else if (this.userInfo.sex == '') {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
					return
				} else if (this.userInfo.birthday == '') {
					uni.showToast({
						title: '请选择出生日期',
						icon: 'none'
					})
					return
				} else if (!uni.$uv.test.mobile(this.userInfo.phone)) {
					uni.showToast({
						title: '请正确填写手机号！',
						icon: 'none'
					})
					return
				} else if (!uni.$uv.test.email(this.userInfo.email)) {
					uni.showToast({
						title: '请正确填写邮箱！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '注册中'
				})
				this.userInfo.status = 1
				uniCloud.callFunction({
					name: 'user',
					data: {
						action: 'register',
						user_info: this.userInfo,
						open_id: uni.getStorageSync('openid')
					},
					success: res => {
						console.log('res===>', res)
						if (res.result.result._id) {
							uni.hideLoading()
							uni.showToast({
								title: '注册成功！',
								icon: 'success'
							})
							uni.setStorageSync('userInfo', res.result.result)
							uni.setStorageSync('isLogin', true)
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '注册失败！'
							})
						}
					},
					fail: err => {
						uni.hideLoading()
						uni.showToast({
							title: '注册失败！'
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.info-item-right {
		height: 18px;
		width: 18px;
		margin-top: 1px;
		margin-left: 4px;
	}

	.info-item-value {
		display: flex;
		text-align: right;
		box-sizing: border-box;
		justify-content: flex-end;
		font-size: 15px;
		width: 80%;
	}

	.avatar-wrapper {
		padding: 0;
		border: none;
		border-radius: 0;
		background-color: transparent;
		border-radius: 10rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.info-item {
		display: flex;
		border-bottom: 1px #f1f1f1 solid;
		padding-top: 22px;
		padding-bottom: 22px;
		box-sizing: border-box;
	}

	.info-item-title {
		font-size: 16px;
		font-weight: 500;
		width: 25%;
	}

	.info-save {
		width: 50vw;
		text-align: center;
		font-size: 15px;
		background: #3dbaba;
		color: #fff;
		padding-top: 9px;
		padding-bottom: 9px;
		border-radius: 5px;
	}
</style>